<template>
  <div class="app-container">


<div v-show="status == statusList[0]">


  
      <el-form label-position="left" inline  :model="searchObject">
        <el-row :gutter="10">
  


      <el-form-item label="内容编号：">  

              <el-input v-model="searchObject.contentId"></el-input>

</el-form-item>


      <el-form-item label="卡片类型：">  

              <el-input v-model="searchObject.cardType"></el-input>

</el-form-item>


      <el-form-item label="画像用户：">  

              <el-input v-model="searchObject.upsUserId"></el-input>

</el-form-item>


      <el-form-item label="修改时间：">  

              <el-input v-model="searchObject.uptTime"></el-input>

</el-form-item>


      <el-form-item label="内容：">  

              <el-input v-model="searchObject.content"></el-input>

</el-form-item>


      <el-form-item label="创建时间：">  

              <el-input v-model="searchObject.crtTime"></el-input>

</el-form-item>


      <el-form-item label="编号：">  

              <el-input v-model="searchObject.id"></el-input>

</el-form-item>


      <el-form-item label="标题：">  

              <el-input v-model="searchObject.label"></el-input>

</el-form-item>


      <el-form-item label="推荐编码：">  

              <el-input v-model="searchObject.itemCode"></el-input>

</el-form-item>


      <el-form-item label="推荐项编号：">  

              <el-input v-model="searchObject.itemId"></el-input>

</el-form-item>


      <el-form-item label="封面：">  

              <el-input v-model="searchObject.picture"></el-input>

</el-form-item>

        </el-row>
      </el-form>
 

    <div style="text-align:right">

   <el-button-group>
              <el-button @click="search" style="width:200px"  icon="el-icon-search" type="primary">搜 索</el-button>
      <el-button @click="toUpdate({})"  icon="el-icon-edit" type="success">添 加</el-button>
      <el-button :disabled="selectList.length == 0"  icon="el-icon-delete" @click="openDelete" type="warning">删 除</el-button>
   
  </el-button-group>
    </div>

    <div style="height:20px"></div>

    <el-table
      @sort-change="sortChange"
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
 

  <el-table-column  label="内容编号" align="center">
           <template slot-scope="{row}">
                {{row.contentId}}
           </template>
    </el-table-column>




  <el-table-column  label="卡片类型" align="center">
           <template slot-scope="{row}">
                {{row.cardType}}
           </template>
    </el-table-column>




  <el-table-column  label="画像用户" align="center">
           <template slot-scope="{row}">
                {{row.upsUserId}}
           </template>
    </el-table-column>




  <el-table-column  label="修改时间" align="center">
           <template slot-scope="{row}">
                {{row.uptTime}}
           </template>
    </el-table-column>




  <el-table-column  label="内容" align="center">
           <template slot-scope="{row}">
                {{row.content}}
           </template>
    </el-table-column>




  <el-table-column  label="创建时间" align="center">
           <template slot-scope="{row}">
                {{row.crtTime}}
           </template>
    </el-table-column>




  <el-table-column  label="编号" align="center">
           <template slot-scope="{row}">
                {{row.id}}
           </template>
    </el-table-column>




  <el-table-column  label="标题" align="center">
           <template slot-scope="{row}">
                {{row.label}}
           </template>
    </el-table-column>




  <el-table-column  label="推荐编码" align="center">
           <template slot-scope="{row}">
                {{row.itemCode}}
           </template>
    </el-table-column>




  <el-table-column  label="推荐项编号" align="center">
           <template slot-scope="{row}">
                {{row.itemId}}
           </template>
    </el-table-column>




  <el-table-column  label="封面" align="center">
           <template slot-scope="{row}">
                {{row.picture}}
           </template>
    </el-table-column>





      <el-table-column width="300"     fixed="right" align="center" label="操作">
      <template slot-scope="{row}">
  <el-button-group>
             <el-button  @click="toUpdate(row)"  icon="el-icon-edit" size="small" type="primary">编 辑</el-button>
      <el-button  @click="cloneObject(row)"  icon="el-icon-plus" size="small" type="success" >拷 贝</el-button>
      </el-button-group>
        
        </template>
      </el-table-column>
    </el-table>

    <div style="height:20px"></div>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryObject.pageNumber"
      :page-sizes="[15, 30, 60, 100]"
      :page-size="queryObject.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

</div>

<div v-show="status == statusList[1]">
 <div>
     <el-button @click="status = statusList[0]" type="warning">返 回</el-button>
      <el-button  @click="save" style="width:200px" type="success">保 存</el-button>
    
    </div>

    <div style="height:20px"></div>

    <el-form
      ref="formObject"
      :rules="formRules"
      label-position="left"
      label-width="80px"
      :model="updateObject"
    >

     

      <el-form-item prop="contentId" label="内容编号：">  

        <el-input v-model="updateObject.contentId"></el-input>

    </el-form-item>




      <el-form-item prop="cardType" label="卡片类型：">  

        <el-input v-model="updateObject.cardType"></el-input>

    </el-form-item>




      <el-form-item prop="upsUserId" label="画像用户：">  

        <el-input v-model="updateObject.upsUserId"></el-input>

    </el-form-item>




      <el-form-item prop="uptTime" label="修改时间：">  

        <el-input v-model="updateObject.uptTime"></el-input>

    </el-form-item>




      <el-form-item prop="content" label="内容：">  

        <el-input v-model="updateObject.content"></el-input>

    </el-form-item>




      <el-form-item prop="crtTime" label="创建时间：">  

        <el-input v-model="updateObject.crtTime"></el-input>

    </el-form-item>




      <el-form-item prop="id" label="编号：">  

        <el-input v-model="updateObject.id"></el-input>

    </el-form-item>




      <el-form-item prop="label" label="标题：">  

        <el-input v-model="updateObject.label"></el-input>

    </el-form-item>




      <el-form-item prop="itemCode" label="推荐编码：">  

        <el-input v-model="updateObject.itemCode"></el-input>

    </el-form-item>




      <el-form-item prop="itemId" label="推荐项编号：">  

        <el-input v-model="updateObject.itemId"></el-input>

    </el-form-item>




      <el-form-item prop="picture" label="封面：">  

        <el-input v-model="updateObject.picture"></el-input>

    </el-form-item>




      
    
   
    </el-form>
</div>






  </div>
</template>

<script>

import LdSelect from "@/components/base/LdSelect";
import LdImg from "@/components/base/LdImg";
import LdTree from "@/components/base/LdTree";
import TinymceEditor from '@/components/Tinymce/index'
import LdArgs from "@/components/base/LdArgs";
import LdEnum from "@/components/base/LdEnum";

import {recCard} from "@/api/modules/auth-server";
let api = recCard;

export default {
name:'recCard',

  components:{
    LdSelect,
    LdImg,
LdTree,
LdArgs,
TinymceEditor,
LdEnum,
  },
  data() {
    return {
  
      //查询对象 修改对象  删除对象 选中对象
      queryObject: {
        query: {},
        pageNumber: 1,
        pageSize: 15,
        orderBy: "",
        asc: true
      },
      status:'table',
      statusList:['table','update'],
     
      showDelete:false,

      searchObject: {},
      deleteObject: {},
      selectList: [],
      //表格展示数据
      listLoading: false,
      list: [],
      total: 0,
      updateObject: {},

      formRules: {

       contentId: [{ required: true, message: "必填内容编号", trigger: "blur" }],


       cardType: [{ required: true, message: "必填卡片类型", trigger: "blur" }],


       upsUserId: [{ required: true, message: "必填画像用户", trigger: "blur" }],


       uptTime: [{ required: true, message: "必填修改时间", trigger: "blur" }],


       content: [{ required: true, message: "必填内容", trigger: "blur" }],


       crtTime: [{ required: true, message: "必填创建时间", trigger: "blur" }],


       id: [{ required: true, message: "必填编号", trigger: "blur" }],


       label: [{ required: true, message: "必填标题", trigger: "blur" }],


       itemCode: [{ required: true, message: "必填推荐编码", trigger: "blur" }],


       itemId: [{ required: true, message: "必填推荐项编号", trigger: "blur" }],


       picture: [{ required: true, message: "必填封面", trigger: "blur" }],

 
      },

    };
  },
  created() {
    this.page();
  },
  methods: {
    openDelete(){
  this.$confirm('确认删除'+this.selectList.length+'条数据?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.removeByIds();
        })
    },
cloneObject(row){
  let v = this.$cloneObject(row);
  this.toUpdate(v);
},
    
    toUpdate(o) {
      this.status=this.statusList[1];
      this.updateObject=Object.assign({} ,o);
    },
    newSearchObject() {
      this.searchObject = {};
    },

    handleSizeChange(v) {
      this.queryObject.pageSize = v;
      this.page();
    },
    handleCurrentChange(v) {
      this.queryObject.pageNumber = v;
      this.page();
    },

    search() {
      let q = Object.assign({}, this.searchObject);
      this.queryObject.query = q;
      this.queryObject.pageNumber = 1;
      this.page();
    },
    async removeByIds(){
   
        try{
          let ids = this.selectList.map(val => val.id);
          await api.removeByIds({ids});
          this.page();
        }catch(e){
          console.error(e)
        }
        this.showDelete=false;
    },
    save() {
     this.$refs.formObject.validate(async (v) => {
        if(!v){
          return;
        }
           await api.save(
          {
            entity: this.updateObject
          },
          true
        );
        this.status=this.statusList[0];
        this.page();

      });
    
    },
    async page(params = this.queryObject) {
      this.listLoading = true;
      try {
        let { list, total } = await api.page(params);
        this.list = list;
        this.total = total;
      } catch (e) {
              console.error(e)
      }

      this.listLoading = false;
    },
    sortChange(params) {
      if (!params.order) {
        return;
      }
      let orderBy = params.prop;
      let asc = params.order.indexOf("asc") != -1;

      this.queryObject.orderBy = orderBy;
      this.queryObject.asc = asc;
      this.page();
    },
    handleSelectionChange(objs) {
      this.selectList = objs;
    }
  }
};
</script>

<style>
</style>
